<template>
  <div class="app-container box">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{height:'655px'}">
          <div class="personal-center-user-info">
            <el-avatar size="large" :src="imgUrl" fit="cover"></el-avatar>
            <div class="personal-center-user-info-full-name">明理紬</div>
            <div class="personal-center-user-info-description">富在术数，不在劳身；利在势居，不在力耕。</div>
            <div class="personal-center-user-info-follow">
              <router-link :to="{name:'homeIndex'}">
                <el-button type="primary"
                           round icon="el-icon-user"
                > Follow me
                </el-button>
              </router-link>
            </div>
            <ul class="personal-center-user-info-list">
              <li>
                <i class="ri-user-3-line"></i>
                前端小白白
              </li>
              <li>
                <i class="ri-magic-line"></i>
                1992/8/11
              </li>
              <li>
                <i class="ri-men-line"></i>
                女
              </li>
              <li>
                <i class="ri-community-line"></i>
                集团 - 事业群 - 技术部
              </li>
              <li>
                <i class="ri-map-pin-2-line"></i>
                中国 • 广东省 • 深圳市
              </li>
              <li>
                <i class="ri-code-s-slash-line"></i>
                JavaScript、HTML、CSS、Vue、Node
              </li>
              <li>
                <el-divider></el-divider>
                <h5>个性标签</h5>
                <el-tag
                  v-for="item in items"
                  :key="item.label"
                  :type="item.type"
                  effect="plain"
                >
                  {{ item.label }}
                </el-tag>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="hover" :body-style="{minHeight:'450px'}">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">
              <el-form ref="form" :model="form" label-width="80px" style="width: 340px;">
                <el-form-item label="姓名">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                  <el-input v-model="form.nickname"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-select v-model="form.sex" placeholder="性别">
                    <el-option label="男" value="man"></el-option>
                    <el-option label="女" value="women"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="个人简介">
                  <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item label="标签">
                  <el-tag
                    :key="tag"
                    v-for="tag in dynamicTags"
                    closable
                    size="small"
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    style="height: 22px;"
                    size="mini"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  >
                  </el-input>
                  <el-button v-else class="button-new-tag" size="small" @click="showInput" >添加</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">保 存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="账号绑定" name="second">
              <div class="personal-center-item">
                <i class="ri-qq-line" style="color: rgb(52, 146, 237);"></i>
                <div class="personal-center-item-content">
                  <div>绑定QQ</div>
                  <div class="personal-center-item-content-second"> 当前未绑定QQ账号 </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider></el-divider>
              <div class="personal-center-item">
                <i class="ri-wechat-line" style="color: rgb(77, 175, 41);"></i>
                <div class="personal-center-item-content">
                  <div>绑定微信</div>
                  <div class="personal-center-item-content-second"> 当前未绑定微信账号 </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider></el-divider>
              <div class="personal-center-item">
                <i class="ri-alipay-line" style="color: rgb(20, 118, 254);"></i>
                <div class="personal-center-item-content">
                  <div>绑定支付宝</div>
                  <div class="personal-center-item-content-second"> 当前未绑定支付宝账号 </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider></el-divider>
              <div class="personal-center-item">
                <i class="ri-weibo-line" style="color: rgb(255, 212, 64);"></i>
                <div class="personal-center-item-content">
                  <div>绑定微博</div>
                  <div class="personal-center-item-content-second"> 当前未绑定微博账号 </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider></el-divider>
              <div class="personal-center-item">
                <i class="ri-github-line"></i>
                <div class="personal-center-item-content">
                  <div>绑定Github</div>
                  <div class="personal-center-item-content-second"> 当前未绑定Github账号 </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider></el-divider>
              <div class="personal-center-item">
                <i class="ri-paypal-line" style="color: rgb(1, 46, 133);"></i>
                <div class="personal-center-item-content">
                  <div>绑定Paypal</div>
                  <div class="personal-center-item-content-second"> 当前未绑定Paypal账号 </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider></el-divider>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script>
export default {
  name: 'index',
  data() {
    return {
      dynamicTags: ['腹黑', '怕麻烦', '小仙女','仙气飘飘','神采奕奕'],
      inputVisible: false,
      inputValue: '',
      form: {
        name: '明里紬',
        sex: '女',
        nickname: '明里つむぎ',
        desc: '富在术数，不在劳身；利在势居，不在力耕。'
      },
      imgUrl: null,
      activeName: 'first',
      items: [
        { type: '', label: '腹黑' },
        { type: 'success', label: '怕麻烦' },
        { type: 'info', label: '小仙女' },
        { type: 'danger', label: '仙气飘飘' },
        { type: 'warning', label: '神采奕奕' }
      ]
    }
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    onSubmit() {
      this.$message({
        message: '模拟保存成功',
        type: 'success'
      });
    }
  },
  mounted() {
    this.imgUrl = this.$store.getters.avatar
  }
}
</script>

<style scoped lang="scss">
.box {
  margin-bottom: 50px;

  ::v-deep.el-form-item__label {
    font-weight: 400;
  }

  ::v-deep.el-input, ::v-deep.el-textarea {
    width: 250px;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 24px;
    line-height: 24px;
    vertical-align: -2px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    ::v-deep.el-input__inner{
      height: 24px;
      vertical-align: -2px;
      line-height: 24px;
    }
  }

  .personal-center-user-info {
    padding: 20px;
    text-align: center;

    ::v-deep.el-avatar {
      width: 100px;
      height: 100px;

      img {
        width: 100px;
        height: 100px;
      }
    }

    .personal-center-user-info-full-name {
      margin-top: 15px;
      font-size: 24px;
      font-weight: 500;
      color: rgb(38, 38, 38);
    }

    .personal-center-user-info-description {
      margin-top: 8px;
      font-size: 14px;
    }

    .personal-center-user-info-follow {
      margin-top: 15px;
    }

    .personal-center-user-info-list {
      margin-top: 18px;
      line-height: 30px;
      text-align: left;
      list-style: none;

      .el-divider {
        margin: 8px 0 28px 0;
      }

      li {
        font-size: 14px;

        h5 {
          line-height: 15px;
          margin: 0;
          margin-bottom: 10px;
        }

        .el-tag {
          margin-right: 5px;
        }

        i {
          font-size: 16px;
          vertical-align: -2px;
        }
      }
    }
  }
  .el-divider{
    margin: 8px 0 28px 0;
  }
  .personal-center-item{
    display: flex;
    i{
      font-size: 40px;
    }
    .personal-center-item-content{
      box-sizing: border-box;
      flex: 1 1 0%;
      margin-left: 20px;
      div{
        font-size: 14px;
      }
      .personal-center-item-content-second{
        margin-top: 8px;
      }
    }
  }

}
</style>
